<template>
  <div class="md-dt-topTable"> 
    <div class="md-dt-firstbg">
      <el-table
        ref="receiveTable"
        size="mini"
        :data="resData"
        style="width: 100%"
        highlight-current-row
        @current-change="tableCurrentChange"
        height="200"
      >
      <el-table-column type="index" label="序号" width="50" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="toolCode" label="工作包器具编码" width="120" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="itemCode" label="图号/型号" width="150" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="itemName" label="物料名称" width="150" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="qualityCode" label="质量编号" width="150" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="itemType" label="物料类型" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="itemQty" label="数量" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="isPaper" label="是否带证" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="remark" label="备注" :show-overflow-tooltip="true"> </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNumber"
      :page-sizes="[10,20,50,100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
  </div>
</template>
<script>

import { mdDtTopMidData } from "@/utils/api.js";

export default {
  name: "MdDtTopTable",
  data() {
    return {
      // 当前页数
      pageNumber: 1,
      // 数据总个数
      totalCount: 0,
      // 返回的数据数组
      resData: [],
      // 每页数据个数
      pageSize: 20,
      topToMIdInfo:''

    };
  },
  methods: {
    // 每页数据条数改变
    handleSizeChange(val){
      this.pageSize = val;
      mdDtTopMidData({
        aoCode:this.topToMIdInfo,
        pageParameter:{
          rows:this.pageSize,
          page:this.pageNumber
        }
      }).then((res)=>{
        console.log('下表Data',res)
        if(res.data.retCode == 200){
          this.resData = res.data.responseBody.result
          this.totalCount = res.data.responseBody.pageParameter.totalCount
        }else {
          this.$Alert({
            title: "失败",
            message: res.data.message,
            type: "error",
          });
        }
      })
    },
    // 分页
    handleCurrentChange(val) {
      this.pageNumber = val;
      mdDtTopMidData({
        aoCode:this.topToMIdInfo,
        pageParameter:{
          rows:this.pageSize,
          page:this.pageNumber
        }
      }).then((res)=>{
        console.log('下表Data',res)
        if(res.data.retCode == 200){
          this.resData = res.data.responseBody.result
          this.totalCount = res.data.responseBody.pageParameter.totalCount
        }else {
          this.$Alert({
            title: "失败",
            message: res.data.message,
            type: "error",
          });
        }
      })
    },
     // 单选表格函数
    tableCurrentChange(val) {
        // 单选表格数据后将msAoMatchInfoId，toolCode给首页 配送按钮
        if(val !== null) {
          this.$bus.$emit('mdDtMidToSend',{msAoMatchInfoId:val.msAoMatchInfoId,toolCode:val.toolCode,msWorkbinMaterialId:val.msWorkbinMaterialId})
        }
    },
  },
  mounted() {
    // msTaskAoId 传给工作包出库按钮进行midTable的数据查询
        this.$bus.$on('mdDtTopToMid',(e)=>{
          this.topToMIdInfo = e
          mdDtTopMidData({
            aoCode:this.topToMIdInfo,
            pageParameter:{
              rows:this.pageSize,
              page:this.pageNumber
            }
          }).then((res)=>{
            console.log('下表Data',res)
            if(res.data.retCode == 200){
              this.resData = res.data.responseBody.result
              this.totalCount = res.data.responseBody.pageParameter.totalCount
            }else {
              this.$Alert({
                title: "失败",
                message: res.data.message,
                type: "error",
              });
            }
          })
        })
  },
};
</script>
<style scoped>
.md-dt-topTable {
  width: 100%;
  height: 100%;
  text-align: center;
}
.el-pagination {
  text-align: center;
}
</style>